<!--
 * @Author: CC-TSR
 * @Date: 2021-01-08 08:57:20
 * @LastEditTime: 2021-01-19 14:41:40
 * @LastEditors: xiejiancheng1999@qq.com
 * @Description: 
 * @FilePath: \前端\src\components\MapTree\XzqMsg.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="mainCard">
    <Row
      v-for="(provinceMsg, index1) in xzqData"
      :key="index1"
      class="province"
    >
      <Col span="4" style="text-align: center">
        <span @click="goto(provinceMsg, 0)">{{ provinceMsg.n }}</span>
      </Col>
      <Col span="20">
        <span
          v-for="(cityMsg, index2) in provinceMsg.cities"
          :key="index2"
          class="city"
          @click="goto(cityMsg, 1)"
          >{{ cityMsg.n }}</span
        >
      </Col>
    </Row>
  </div>
</template>
<script>
import xzqConfig from "../../xzqConfig";
import { mapState, mapActions } from "vuex";
export default {
  name: "XzqMsg",
  data() {
    return {
      xzqData: [],
    };
  },
  computed: {
    ...mapState("oneMap", {
      view: (state) => state.view,
    }),
  },
  methods: {
    ...mapActions("oneMap", ["updateMaps"]),
    goto(input, index) {
      let center = input.g
        .split("|")[0]
        .split(",")
        .map((item) => {
          return Number(item);
        });
      if (index == 0) {
        if (input.n == "全国" || input.n == "港澳台") {
          this.view.goTo({
            center: center,
            zoom: 5,
          });
        } else {
          this.view.goTo({
            center: center,
            zoom: 7,
          });
        }
      } else {
        this.view.goTo({
          center: center,
          zoom: 9,
        });
      }
    },
  },
  mounted() {
    this.xzqData = xzqConfig.xzqMsg;
  },
};
</script>
<style lang='scss' scoped>
.mainCard {
  width: 406px;
  height: 400px;
  position: fixed;
  top: 150px;
  right: 340px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 6px 0px rgba(65, 65, 65, 0.34);
  border-radius: 2px;
  overflow-y: scroll;
}
.province {
  margin: 5px 4px;
  .city {
    color: rgba(48, 128, 254, 1);
    margin-right: 12px;
    display: inline-block;
    transition: all 0.2s cubic-bezier(0.11, 0.31, 0.93, 0.63);
    &:hover {
      transform: scale(1.5);
      color: rgb(15, 120, 134);
      font-weight: bold;
    }
  }
}

span {
  cursor: pointer;
}
</style>
